<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作，针对css3、添加、移除、切换的元素"类名"操作
		 addClass()        有参：1个参和多个参
		                   语法：addClass("类名")
						   <p class="类名">
						   语法：addClass("类名1 类名2")
						   <p class="类名1 类名2">
						   功能：匹配元素集合中的所有元素
						         添加一个或者多个类名操作
						   理解：元素添加存在的样式
		 removeClass()     功能：匹配元素集合中的所有元素
						         移除一个或者多个类名操作
		 toggleClass()     功能：如果元素有类名移除，没有则添加
		 hasClass()        功能：检查匹配元素集合中是否包含指定类名
		                        返回值bool
		 -->
		 <!-- 要求1：jq引入
		         2.html:   div  id="targetElement"
				           4个按钮    id="addClassBtn"
						              id=" removeClassBtn"
									  id="toggleClassBtn"
									  id="hasClassBtn"
				           div  id="resultArea"
				 3.css:   .bgColor{300*300 背景色随意}
						  .borders{ 10个像素红色边框  倒角画圆}
		  -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.borders{
				border: 10px solid #ff0;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类名  按钮 添加效果【样式】 300*300  背景色红色
		  $("#addClassBtn").click(function(){
			 //div添加样式
			  $("#targetElement").addClass("bgColor borders");
			  $("#resultArea").html("<h4>添加样式类名:hgColor</h4>")
		  });
		//2.点击 添加类名 按钮 添加效果【样式】
		//300*300 背景色红色  圆 外层 10px黄色框
		//3.点击  移除类名 按钮 添加效果【样式】 300*300 背景色红色
		$("#removeClassBtn").click(function(){
					 //div添加样式--存在样式：类名
			  $("#targetElement").removeClass("borders");
			  $("#resultArea").html("<h4>移除样式类名:bgColor</h4>")
		});
		//4.点击 切换类名 按钮 添加效果【样式】
		//300*300 背景色红色  圆 外层 10px黄色框
		$("#toggleClassBtn").click(function(){
					 //div添加样式--存在样式：类名
			  $("#targetElement").toggleClass("borders");
			  $("#resultArea").html("<h4>切换样式类名:borders</h4>")
		});
		//5..点击 切换类名 按钮 添加效果【样式】
		// 去掉300*300 背景色红色  圆 外层 10px黄色框
		$("#toggleClassBtn").click(function(){
					 //div添加样式--存在样式：类名
			  $("#targetElement").toggleClass("bgColor");
			  $("#resultArea").html("<h4>切换样式类名:borders</h4>")
		});
		//6.检查类名是否存在： 存在true 不存在false
		$("#hasClassBtn").click(function(){
		 //div添加样式--存在样式：类名
			var hc=$("#targetElement").hasClass("borders");
			$("#resultArea").text("检查当前类名是否存在"+hc)
		});    
		</script>
	</body>
</html>